<template>
    <div>
        <nav2 :pid="pid"></nav2>
         <div class="banner">
            <Banner></Banner>
         </div>
        <div class="container" style="width:1200px;">
            <myleftNav style="float:left;width:20%" :navData="navData" ></myleftNav>
            <mydetails style="float:left;width:80%" v-if="navData&&navData[0].subNavbars.length>0" :detailData="detailData"></mydetails>
            <mydetails style="float:left;width:100%" v-if="navData&&navData[0].subNavbars.length==0" :detailData="detailData"></mydetails>
            <div class="clearfix"></div>
        </div>   
        <div>
            <publicFooter></publicFooter>
        </div>
    </div>
</template>

<script>
import myleftNav from '@/components/leftNav'
import nav2 from '@/components/nav2'
import mydetails from '@/components/details'
import publicFooter from '@/components/publicFooter'
import Banner from '@/components/banner'
import navApi from '@/api/index/nav.js'
    export default {
        name:'Details',
        data(){
            return {
                children:null,
                url:null,
                articleId:null,
                detailData:null,
                navData:null,
                pid:null
            }
        },
        components:{
            myleftNav,
            nav2,
            mydetails,
            publicFooter,
            Banner,
        },
        beforeRouteUpdate (to, from, next) {
            this.pid = to.query.pid;
           this.getChild(to);
            this.getDetailByUrl(to);
            this.getDetailById(to);
            next();
        },
        created(){
            if(this.$route.query.pid){
                this.getChild(this.$route);
            }
            
            this.pid = this.$route.query.pid;
             this.getDetailByUrl(this.$route);
            this.getDetailById(this.$route);
        },
        methods:{
            getChild(to){//获取子菜单
                let fromData = {
                    id:to.query.pid
                }
                navApi.getNavChild(fromData).then(response=>{
                    this.navData = response;
                })
            },
            getDetailByUrl(to){//获取详情  根据url
                if(to.query.url&&!to.query.articleId){
                    let fromData = {
                        url:to.query.url
                    }  
                    navApi.getArticleByUrl(fromData).then(response=>{
                        this.detailData = response;
                    })
                }
            },
            getDetailById(to){//获取详情  根据id
             if(to.query.articleId){
                    let fromData = {
                        id:to.query.articleId
                    }
                    navApi.getArticleById(fromData).then(response=>{
                        this.detailData = response;
                    })
                }
            }
        }
    }
</script>

<style scoped>
.container{
    width: 1200px;
    margin:0 auto;
}
.banner{
    margin-bottom:30px;
}
</style>